function Tabs(options) {
	var options = this.options = $.extend({
		el: null,
		minHeight:$.ui.content.clientHeight,
		panelHeaderH:$.ui.header.clientHeight,
		duration: 200,
		selectedClass: 'ui-selected',
		tabsClass:"ui-tabs",
		defaultIndex:1,
		contentWidth:$.ui.content.clientWidth,
		panelId:null
	}, options);

	// tab控件
	this.$el = $(options.el);

	// 头部
	var children = this.$el.children("div");
	this.$header = $(children[0]);
	this.$contentDiv = $(children[1]);
	this.$contents = this.$contentDiv.children("div");

	this.animateWidth = this.options.contentWidth;
	this.headerHeight = this.$header.height();
	
	
	this.$el.css("min-height",options.minHeight);
	//this.$contentDiv.css("min-height",options.minHeight-this.headerHeight);
	
	this.isActive = false;
	this.initialize();
	this.register();
}
Tabs.prototype = {
	initialize: function() {
		var that = this;
		this.$el.addClass(this.options.tabsClass);
		this.$contents.css('width', this.animateWidth);
		// 缓存索引
		this.$header.children("a").each(function(index,el) {
			if(index==that.options.defaultIndex-1) {
				var selectedClass = that.options.selectedClass;
				this.className=selectedClass;
				that.$contentDiv.find("div:nth-child("+(index+1)+")").addClass(selectedClass);
			}
			var $this = $(this);
			$this.attr('data-index', $this.index());
		});
	},
	register: function() {
		var that = this,
			options = this.options;
		this.$header.on('click', "a", function() {
			var $this = $(this),
				index = $this.data('index');
				that.goToTab(parseInt(index, 10));

		});
		this.$el.bind("swipeLeft", function(evt) {
			that.goToTab("next");
		});
		this.$el.bind("swipeRight", function(evt) {
			that.goToTab("prev");
		});
		var panel = $("#"+that.options.panelId);
		panel.bind("loadpanel",function(){
			that.isActive = true;
			that.keepTabsHeaderTop();
		});
		panel.bind("unloadpanel",function(){
			that.isActive = false;
		});
	},
	animate: function(index) {
		if (!this.animating) {
			var that = this,
				options = this.options,
				animateWidth = this.animateWidth,
				$visible = this.$contents.filter('.' + options.selectedClass),
				$element = this.$contents.eq(index),
				visibleIndex = $visible.index() - 1,
				average = animateWidth / options.duration * 10,
				value = 0,
				elInitLeft,
				viInitLeft;
			// 初始化位置， 如果当前点击的tab在已选中的tab之后则向左滚动，否则向右
			if (visibleIndex < index) {
				elInitLeft = this.animateWidth;
				viInitLeft = 0;
			} else {
				elInitLeft = -this.animateWidth;
				viInitLeft = 0;
			}
			this.animating = true;
			$element.addClass('animating')
				.css('left', elInitLeft);
			$visible.addClass('animating')
				.css('left', viInitLeft);
			var timeId = setInterval(function() {
				value += average;

				if (visibleIndex < index) {
					$visible.css('left', -value);
					$element.css('left', animateWidth - value);
				} else {
					$visible.css('left', value);
					$element.css('left', -(animateWidth - value));
				}

				if (value >= animateWidth) {
					clearInterval(timeId);
					$element.removeClass('animating').addClass('ui-selected');
					$visible.removeClass('animating ui-selected').css({
						left: 0
					}).hide();
					that.animating = false;
				}
			}, 10);
		}
	},
	goToTab: function(goWhere) {
		var targetIndex = null
		if(typeof(goWhere) == "number" || typeof(goWhere) == "string") targetIndex=goWhere;
		else return ;
		var that = this;
		var selectedClass = that.options.selectedClass;
		var $currTab = that.$header.find('a.' + selectedClass);
		var currIndex = $currTab.data("index");
		currIndex = parseInt(currIndex, 10);
		if(currIndex == targetIndex) return;
		
		if(typeof(goWhere)=="string"){			
			if (targetIndex == "prev") {
				targetIndex = currIndex - 1;
			} else if(targetIndex == "next"){
				targetIndex = currIndex + 1;
			} else return;
		}
		
		
		
		var $targetTab = that.$header.find("a[data-index='" + targetIndex + "']");
		if ($targetTab.length == 0) return;
		var loadFun = $targetTab.data("load");
		if (loadFun && loadFun != "") { //执行加载方法
			eval(loadFun + "()");
		}
		$currTab.removeClass(selectedClass);
		$targetTab.addClass(selectedClass);
		that.asyncHeader(targetIndex);
		that.animate(targetIndex);
	},
	//同步header的克降导航栏
	asyncHeader: function(targetIndex) {
		var that = this;
		var $tab = $.query("div.clone",$.ui.header).find("a:nth-child(" + (targetIndex + 1) + ")");
		if ($tab.length != 1) return;
		var selectClass = that.options.selectedClass;
		$tab.addClass(selectClass).siblings().removeClass(selectClass);
	},
	/**
	 * 克隆导航栏
	 * @return {[type]} [description]
	 */
	clone: function() {
		var that = this;
		var $cloneEl = this.$header.clone();
		$cloneEl.addClass("clone");
		$cloneEl.css({"position":"absolute","top":that.options.panelHeaderH+"px"});
		$cloneEl.find("a").bind("click", function() {
			var selectClass = that.options.selectedClass;
			$(this).addClass(selectClass);
			$(this).siblings().removeClass(selectClass);
			var realTab = that.$header.find("a").get($(this).index());
			$(realTab).trigger("click");
		});
		return $cloneEl;
	},
	keepTabsHeaderTop : function () {
    	var that = this;
        if(!that.isActive) return;
    	var header = that.$header;
        if(header.css("display") == 'none') return;
        var top = header.offset().top;
        var $panelHeader = $($.ui.header)
        if (top <= that.options.panelHeaderH) {
        	$panelHeader.addClass("hasmenu");
            if (header.css('visibility')=="hidden") return;
            that.clone().appendTo($panelHeader.find("header"));
            header.css('visibility', 'hidden');
        } else {
            $.query(" div.clone",$.ui.header).remove();
            header.css('visibility', 'visible');
        	$($.ui.header).removeClass("hasmenu");
        }
    }
};